<!--
 * @Description:
 * @Version: 1.0.0
 * @Autor: zhou
 * @Date: 2022-04-23 11:49:20
 * @LastEditors: yel
 * @LastEditTime: 2022-08-30 17:34:17

-->
<template>
    <div class="container full-screen">
        <!-- 1左侧 -->
        <!-- <div class="left flexcbh position-re pro-bgcolor10 p-20">
            <pro-title2 label="企业列表"></pro-title2>
        </div> -->

        <div class="left">
            <!-- 左侧第一行 -->
            <div class="flexcbh pro-bgcolor10 p-20 m-b20">
                <pro-title label="检测率排名"></pro-title>
                <div class="left-top-content fx1 hidden">
                    <StaticTable
                        :columns="epi1.columns1"
                        :data-list="epi1.data"
                        headBg="rgba(22, 159, 196, 0.2)"
                        border_color="rgba(0, 0, 0, 0)"
                        :show_head="false"
                        :headHeight="0"
                        style="width: 100%"
                    >
                        <template v-slot:col2="scope">
                            <el-progress
                                class="process_line"
                                :percentage="scope.row.col2"
                                :show-text="true"
                                :text-inside="false"
                                style="
                                    height: 100%;
                                    align-items: center;
                                    display: flex;
                                "
                                :stroke-width="9"
                            ></el-progress>
                        </template>
                    </StaticTable>
                </div>
            </div>

            <!-- 左侧第二行 -->
            <div class="flexcbh pro-bgcolor10 p-20 m-b20">
                <pro-title label="核实完成率排名"></pro-title>
                <div class="left-top-content fx1 hidden">
                    <StaticTable
                        :columns="epi1.columns1"
                        :data-list="epi1.data1"
                        headBg="rgba(22, 159, 196, 0.2)"
                        border_color="rgba(0, 0, 0, 0)"
                        :show_head="false"
                        style="width: 100%"
                        :headHeight="0"
                    >
                        <template v-slot:col2="scope">
                            <el-progress
                                class="process_line"
                                :percentage="scope.row.col2"
                                :show-text="true"
                                :text-inside="false"
                                style="
                                    height: 100%;
                                    align-items: center;
                                    display: flex;
                                "
                                :stroke-width="9"
                            ></el-progress>
                        </template>
                    </StaticTable>
                </div>
            </div>
        </div>

        <!-- 2 中间 -->
        <div class="middle">
            <div class="middle-content pro-bgcolor11 m-b20">
                <div class="left-box">
                    <div>
                        检测轮次
                        <el-select
                            placeholder="请选择核酸轮次"
                            v-model="epi1.queryForm.roundId"
                            @change="roundsChange"
                        >
                            <!-- <el-option label="第一轮" :value="1" />
                            <el-option label="第二轮" :value="2" />
                            <el-option label="第三轮" :value="3" />
                            <el-option label="第四轮" :value="4" /> -->

                            <el-option
                                v-for="(item, index) in detection"
                                :key="index"
                                :label="item.label"
                                :value="item.value"
                            >
                            </el-option>
                        </el-select>
                    </div>

                    <div>
                        网格层级
                        <!-- <el-select v-model="value">
                            <el-option :label="1" :value="1" />
                        </el-select> -->

                        <el-input
                            v-model="value"
                            placeholder="请选择网格层级"
                            class="grid-box"
                            @click.native="gridbox"
                        />
                    </div>
                </div>

                <div class="right-box">
                    <div class="right-box-content">
                        <div class="num">
                            {{ countData.peopleNumber }}
                            <span class="word">人</span>
                        </div>
                        <div>网格居民数</div>
                    </div>

                    <div class="right-box-content">
                        <div class="num">
                            {{ countData.detectedPeopleNumber }}
                            <span class="word">人</span>
                        </div>
                        <div>已检测人数</div>
                    </div>

                    <div class="right-box-content">
                        <div class="num">
                            {{ countData.undetectedPeopleNumber }}
                            <span class="word">人</span>
                        </div>
                        <div>未检测人数</div>
                    </div>

                    <div class="right-box-content">
                        <div class="num">
                            {{ countData.detectRatio }}
                            <span class="word">%</span>
                        </div>
                        <div>检测率</div>
                    </div>

                    <div class="right-box-content">
                        <div class="num">
                            {{ countData.lastChangeRatio }}
                            <span class="word">%</span>
                        </div>
                        <div>上轮整改率</div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 3 右侧 -->
        <div class="right">
            <!-- 右侧第一行 -->
            <div class="flexcbh pro-bgcolor10 p-20 m-b20">
                <pro-title label="整改率排名"></pro-title>
                <div class="right-top-content fx1 hidden">
                    <StaticTable
                        :columns="epi1.columns1"
                        :data-list="epi1.data2"
                        headBg="rgba(22, 159, 196, 0.2)"
                        border_color="rgba(0, 0, 0, 0)"
                        :show_head="false"
                        style="width: 100%"
                        :headHeight="0"
                    >
                        <template v-slot:col2="scope">
                            <el-progress
                                class="process_line"
                                :percentage="scope.row.col2"
                                :show-text="true"
                                :text-inside="false"
                                style="
                                    height: 100%;
                                    align-items: center;
                                    display: flex;
                                "
                                :stroke-width="9"
                            ></el-progress>
                        </template>
                    </StaticTable>
                </div>
            </div>

            <!-- 右侧第二行 -->
            <div class="flexcbh pro-bgcolor10 p-20 m-b20">
                <pro-title label="本轮新增未检测人数排名"></pro-title>
                <div class="right-top-content fx1 hidden">
                    <StaticTable
                        :columns="epi1.columns1"
                        :data-list="epi1.data3"
                        headBg="rgba(22, 159, 196, 0.2)"
                        border_color="rgba(0, 0, 0, 0)"
                        :show_head="false"
                        style="width: 100%"
                        :headHeight="0"
                    >
                        <template v-slot:col2="scope">
                            <el-progress
                                class="process_line"
                                :percentage="scope.row.col2"
                                :show-text="true"
                                :text-inside="false"
                                style="
                                    height: 100%;
                                    align-items: center;
                                    display: flex;
                                "
                                :stroke-width="9"
                            ></el-progress>
                        </template>
                    </StaticTable>
                </div>
            </div>
        </div>

        <!-- 4 企业详情弹窗 -->
        <div class="dialog_box flexrcc" v-if="open_detail">
            <ListDetail
                :title="detail_title"
                @close_info="closeGridBox"
                :dialog_width="800"
            >
                <div class="full-screen hidden">
                    <div class="full-screen flexcb">
                        <div class="p-row30">
                            <EpiContentNav
                                :list="epi.detail_btn"
                                @change="changeContent"
                            ></EpiContentNav>
                        </div>

                        <div
                            v-if="epi.cut_content == 1"
                            class="dialog_content1 fx1 of-xhya scroll_bar"
                        >
                            <info-tree
                                :data_arr="dataArr"
                                :default_expanded_keys="default_town"
                                @tree_select="onTreeSelect"
                                key="town"
                            ></info-tree>
                        </div>

                        <div
                            v-if="epi.cut_content == 2"
                            class="dialog_content1 fx1 of-xhya scroll_bar"
                        >
                            <info-tree
                                :data_arr="dataArr2"
                                :default_expanded_keys="default_industry"
                                @tree_select="onTreeSelect"
                                key="industry"
                            ></info-tree>
                        </div>
                    </div>
                </div>
            </ListDetail>
        </div>
        <!-- 地图弹出 -->
        <div v-if="map_dialog">
            <ProDialog @myclose="onMapClose"></ProDialog>
        </div>
    </div>
</template>

<script>
import ProTitle from "@/components/Pro/ProTitle";
import ProTitle2 from "@/components/Pro/ProTitle2";
import StaticTable from "@/components/Common/StaticTable.vue";
import ProShade from "./ProShade";
import PieChart from "@/components/Chart/PieChart/PieChart.vue";
import LineChart from "@/components/Chart/LineChart/LineChart.vue";
import BarChart from "@/components/Chart/BarChart/BarChart.vue";
import ListDetail from "./ListDetail";
import DynamicTable from "@/components/Common/DynamicTable.vue";
import ProPage from "./ProPage";
import EpiContentNav from "./EpiContentNav";
import ProDialog from "./ProDialog";

import { my_option } from "@/utils/mock/proview/detection";

import InfoTree from "./InfoTree";

// import {
//     getCompany,
//     listCompanyWork,
//     listWork,
//     detailWork,
// } from "@/api/proview.js";

import {
    getCompareMap,
    getCompareCount,
    getCompareDetectRank,
    getCompareVerifyRank,
    getCompareNewlyRank,
    getAllRound,
} from "@/api/epidemic.js";
import { townsGrid, industrysGrid } from "@/api/epiview.js";
// import { log } from "qn-rtplayer-web/build/log";

export default {
    name: "NavDetection",
    components: {
        ProTitle,
        ProTitle2,
        DynamicTable,
        StaticTable,
        ProShade,
        PieChart,
        LineChart,
        BarChart,
        ListDetail,
        ProPage,
        EpiContentNav,
        InfoTree,
        ProDialog,
    },
    props: {
        company_type: {
            type: Array,
            default: () => [],
        },
    },
    inject: ["setParent"],
    data() {
        return {
            map_dialog: false,
            //检测轮次
            detection: [],
            //网格层次
            value: "",
            epi: {
                data: [{}],
                columns1: my_option.columns1,
                cut_companyid: "",
                queryForm: {
                    sort_by: false, // asc (true) 正序  desc(false) 倒序
                    gridName: "",
                },

                data2: [
                    {
                        title: 1,
                        col2: "红花根村",
                        col3: "彬池村",
                        col4: 546,
                    },
                    {
                        title: 2,
                        col2: "红花根村",
                        col3: "彬池村",
                        col4: 546,
                    },
                    {
                        title: 3,
                        col2: "红花根村",
                        col3: "彬池村",
                        col4: 546,
                    },
                ],
                columns2: my_option.columns2,
                queryForm2: {
                    current: 1,
                    size: 10,
                    level: 0,
                    gridName: "",
                    sortList: [
                        {
                            asc: false,
                            column: "",
                        },
                    ],
                },
                total2: 3,
                pages2: 1,

                // 详情-----
                cut_content: 1,
                detail_btn: [
                    { label: "村镇", id: 1 },
                    { label: "行业", id: 2 },
                ],
                queryForm3: {
                    company_id: "",
                    pageSize: 13,
                    pageNum: 1,
                },
                table_date: null,
                pages: 1,
            },
            epi1: {
                // 检测对比数据对象
                queryForm: {
                    gridId: "",
                    roundId: "",
                    type: "",
                },
                data: [],
                data1: [
                    // { title: "第七片区", col2: 83 },
                    // { title: "第一片区", col2: 76 },
                    // { title: "第四片区", col2: 71 },
                    // { title: "第六片区", col2: 65 },
                    // { title: "第三片区", col2: 53 },
                    // { title: "第五片区", col2: 44 },
                    // { title: "第二片区", col2: 32 },
                ],
                data2: [
                    // { title: "第四片区", col2: 70 },
                    // { title: "第二片区", col2: 62 },
                    // { title: "第六片区", col2: 60 },
                    // { title: "第五片区", col2: 56 },
                    // { title: "第一片区", col2: 43 },
                    // { title: "第七片区", col2: 22 },
                    // { title: "第三片区", col2: 17 },
                ],
                data3: [
                    // { title: "第六片区", col2: 64 },
                    // { title: "第三片区", col2: 63 },
                    // { title: "第一片区", col2: 58 },
                    // { title: "第五片区", col2: 54 },
                    // { title: "第七片区", col2: 45 },
                    // { title: "第二片区", col2: 21 },
                    // { title: "第四片区", col2: 3 },
                ],
                columns1: my_option.columns1,
            },
            open_detail: false,
            detail_title: "网格层级",

            //暂时
            enterprise: {
                data: [],
                columns: my_option.columns_table,
                cut_companyid: "",
                queryForm: {
                    sort_by: false, // asc (true) 正序  desc(false) 倒序
                    industry_type: "",
                    company_name: "",
                },
                queryForm2: {
                    company_id: "",
                    pageSize: 13,
                    pageNum: 1,
                    type: 1,
                },
                columns2: [
                    {
                        label: "序号",
                        prop: "title",
                        width: "60",
                    },
                    {
                        label: "姓名",
                        prop: "col2",
                    },
                    {
                        label: "联系电话",
                        prop: "col3",
                    },
                    {
                        label: "所属网格",
                        prop: "col4",
                    },
                    {
                        label: "轮次",
                        prop: "col5",
                    },
                ],
                data2: [
                    {
                        title: 1,
                        col2: "红花根村",
                        col3: "彬池村",
                        col4: 546,
                        col5: 1,
                    },
                    {
                        title: 2,
                        col2: "红花根村",
                        col3: "彬池村",
                        col4: 546,
                        col5: 1,
                    },
                    {
                        title: 3,
                        col2: "红花根村",
                        col3: "彬池村",
                        col4: 546,
                        col5: 1,
                    },
                ],
                open_detail: false,
                detail_title: "重点人员信息",
                pages: 1,
                cut_content: 1,
                detail_btn: [
                    { label: "个人信息", id: 1 },
                    { label: "检测记录", id: 2 },
                ],
            },

            dataArr: [], // 网格层级-村镇
            dataArr2: [], // 网格层级-行业
            // 树结构的默认展开
            default_town: [],
            default_industry: [],

            //网格居民数 已检测人数等数据
            countData: {
                peopleNumber: "0", //网格人数
                detectedPeopleNumber: "0", //已检测人数
                undetectedPeopleNumber: "0", //未检测人数
                detectRatio: "0", //检测率
                lastChangeRatio: "0", //上轮整改率
            },
        };
    },
    computed: {},

    watch: {
        // 全局点击
        // isHandleGlobal(n, o) {
        //     this.closeOnshow();
        // },
    },

    created() {
        this.getAllData();
        // this.getAllRound();
        // this.townsGrid();
        // this.industrysGrid();
    },
    methods: {
        async getAllData() {
            const [data1, data2] = await Promise.all([
                this.getAllRound(),
                this.townsGrid(),
                this.industrysGrid(),
            ]);
            this.epi1.queryForm.roundId = data1[0].id;
            this.epi1.queryForm.gridId = data2[0].id; // 铁山港 id 3
            this.epi1.queryForm.type = 1; // 1-乡镇网格 2-行业网格
            this.value = data2[0].gridName;
            this.getData();
        },
        getData() {
            this.getCompareMap();
            this.getCompareDetectRank();
            this.getCompareVerifyRank();
            this.getCompareNewlyRank();
            this.getCompareCount();
        },
        /** 关闭地图的消息弹窗(给父组件调用) */
        closeMap(id) {
            this.MarkerData.forEach((item) => {
                if (id == this.enterprise.cut_companyid) {
                    // 点击x号 关闭 当前消息窗口
                    item.grade = 28;
                } else {
                    // 点击另外的地图标点, 关闭旧窗口, 打开新窗口时, 保留新窗口的icon高亮
                    if (item.id != this.enterprise.cut_companyid) {
                        item.grade = 28;
                    }
                }
            });
        },
        /** 点击地图弹窗详情(给父组件调用) */
        // detailMap(id) {
        //     this.enterprise.open_detail = true;
        //     this.open_detail = false;
        // },
        // 检测轮次枚举
        async getAllRound() {
            const res = await getAllRound();
            this.detection = res.data.map((item) => ({
                label: item.title,
                value: item.id,
            }));
            return res.data;
        },
        // 获取乡镇网格枚举
        townsGrid() {
            return townsGrid().then((res) => {
                if (res.code == 0 && res.data && res.data.length > 0) {
                    this.dataArr = res.data[0].children;
                    if (this.dataArr && this.dataArr.length > 0) {
                        this.dataArr.forEach((item) => {
                            this.default_town.push(item.id);
                        });
                    }
                }
                return res.data;
            });
        },
        // 获取产业网格枚举
        industrysGrid() {
            return industrysGrid().then((res) => {
                if (res.code == 0 && res.data && res.data.length > 0) {
                    this.dataArr2 = res.data[0].children;
                    if (this.dataArr2 && this.dataArr2.length > 0) {
                        this.dataArr2.forEach((item) => {
                            this.default_industry.push(item.id);
                        });
                    }
                    console.log(this.default_industry);
                }
                return res.data;
            });
        },
        // 中间部分检测统计数据
        getCompareMap() {
            return getCompareMap(this.epi1.queryForm).then((res) => {
                const infos = [];
                res.data.forEach((item) => {
                    const info = JSON.parse(item.info);
                    infos.push({
                        polygons: info.polygon,
                        color: info.strokeColor,
                        weight: info.strokeWidth,
                        opacity: info.strokeOpacity,
                        fillColor: info.fillColor,
                        fillOpacity: info.fillOpacity,
                        name: item.name,
                        id: item.townsGridId,
                    });
                });
                this.setParent((parent) => {
                    parent.polygonsData = infos;
                    // console.log(parent, infos);
                });
            });
        },
        // 中间部分检测统计数据
        async getCompareCount() {
            const res = await getCompareCount(this.epi1.queryForm);
            this.countData.peopleNumber = res.data.peopleNumber;
            this.countData.detectedPeopleNumber = res.data.detectedPeopleNumber;
            this.countData.undetectedPeopleNumber =
                res.data.undetectedPeopleNumber;
            this.countData.detectRatio =
                parseFloat(res.data.detectRatio).toFixed(2) * 100; //(parseFloat(item.ratio) * 100).toFixed(2),
            this.countData.lastChangeRatio =
                parseFloat(res.data.lastChangeRatio).toFixed(2) * 100;
        },
        // 检测率排名
        async getCompareDetectRank() {
            const res = await getCompareDetectRank(this.epi1.queryForm);

            this.epi1.data = res.data.map((item) => ({
                title: item.gridName,
                col2: item.ratio.toFixed(1) * 100,
            }));
        },
        // 获取核实完成率排名
        getCompareVerifyRank() {
            return getCompareVerifyRank(this.epi1.queryForm).then((res) => {
                if (res.code === 0) {
                    this.epi1.data1 = res.data.map((item) => ({
                        title: item.gridName,
                        col2: item.ratio.toFixed(1) * 100,
                    }));
                }
            });
        },
        // 获取本轮新增未检测人数排名
        getCompareNewlyRank() {
            return getCompareNewlyRank(this.epi1.queryForm).then((res) => {
                if (res.code === 0) {
                    this.epi1.data3 = res.data.map((item) => ({
                        title: item.gridName,
                        col2: item.ratio.toFixed(1) * 100,
                    }));
                }
            });
        },
        //切换
        roundsChange() {
            this.getData();
        },
        // 网格层级弹窗-打开
        gridbox() {
            this.open_detail = true;
        },
        // 网格层级弹窗-关闭
        closeGridBox() {
            this.open_detail = false;
            this.epi.cut_content = 1;
        },
        // 网格层级弹窗-切换tab
        changeContent(id) {
            this.epi.cut_content = id;
        },
        // 网格层级弹窗-树形节点选择
        onTreeSelect(name, id) {
            console.log(name, id);
            this.value = name;
            this.epi1.queryForm.gridId = id;
            this.getData();
            this.closeGridBox();
        },
        /** 点击地图覆盖物emit=false  点击table弹出简介信息时emit=true */
        getIntroduction2(obj, emit = false) {
            console.log(obj);
            this.map_dialog = true;
        },
        onMapClose() {
            this.map_dialog = false;
        },
    },
};
</script>

<style lang="scss">
.el-image-viewer__wrapper {
    top: vh(100);
    bottom: vh(100);
    left: vh(200);
    right: vh(200);
}

.el-loading-spinner .circular .path {
    stroke: #2ef7fc !important;
}

.el-select-dropdown {
    background: #002440;
    border: none;
}

.el-select-dropdown__list {
    .hover {
        background: rgba(22, 159, 196, 0.16);
    }
}
.el-popper .popper__arrow,
.el-popper .popper__arrow::after {
    // border-bottom-color: #002440 !important;
    display: none;
}

.el-progress__text {
    color: #fff;
    margin-left: vw(24);
}
.el-progress-bar__inner {
    border-radius: vw(1);
    background: linear-gradient(90deg, #0f699c 0%, #49d4ff 100%);
}

.el-select-dropdown__item {
    color: #ffffff;
}
</style>

<style lang="scss" scoped>
.container {
    ::v-deep .el-input__inner {
        color: white;
    }
    ::v-deep .el-input--medium .el-input__inner {
        background-color: #002440;
        border: 1px solid #094666;
    }

    .process_line {
        width: vw(300);
        ::v-deep .el-progress-bar__outer {
            border-radius: 0;
            background-color: rgba(255, 255, 255, 0.1);
        }
    }

    // background-color: aqua;   // 其子元素脱离的标准流
    .left {
        position: absolute;
        z-index: 12;
        left: vw(30);
        top: vh(88);
        bottom: vh(30);
        width: vw(480);

        display: grid;
        grid-template-rows: repeat(2, 1fr);
        overflow: hidden;
    }

    .middle {
        position: absolute;
        z-index: 13;
        left: vw(520);
        bottom: vh(47);
        width: vw(880);
        height: vw(120);

        .middle-content {
            height: 100%;
            display: grid;
            grid-template-columns: vw(270) 1fr;
            padding: vh(20) vh(27);

            .left-box {
                display: grid;
                grid-template-rows: 1fr 1fr;
                color: #fff;

                ::v-deep .el-select {
                    width: vw(175);
                    margin-left: vw(8);
                }

                ::v-deep .grid-box {
                    width: vw(175);
                    margin-left: vw(8);
                }
            }

            .right-box {
                display: grid;
                grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
                grid-column-gap: vw(8);

                .right-box-content {
                    background: url("~@/assets/images/proview/Component32.png")
                        no-repeat;
                    background-size: 100% 100%;
                    display: flex;
                    justify-items: center;
                    align-items: center;
                    flex-direction: column;
                    font-size: vw(14);
                    color: rgba(255, 255, 255, 0.8);

                    .num {
                        margin-top: vw(10);
                        font-size: vw(26);
                        color: #61ffff;
                    }

                    .word {
                        font-size: vw(14);
                        color: #61ffff;
                    }
                }
            }
        }

        // bottom: vh(82);
        // background: #002440;
        // box-shadow: 0px 20px 20px rgba(0, 0, 0, 0.6);
        // padding: vh(5) vw(20) vh(20);
        // .middle-top {
        //     .middle-top-title {
        //         padding: vh(12) 0;
        //     }
        //     .middle-top-content {
        //         display: grid;
        //         grid-template-columns: [c1] 1fr [c1e c2] 1fr [c2e c3];
        //         gap: vh(5) vw(5);
        //         grid-auto-flow: row dense;
        //         // align-items: center;
        //         align-content: center;
        //         text-align: center;
        //         .content-item {
        //             padding: vh(8) vw(5);
        //             background: rgba(22, 159, 196, 0.08);
        //             border: 1px solid rgba(22, 159, 196, 0.08);
        //             border-radius: 2px;
        //             font-size: vh(14);
        //             color: #ffffff;
        //             &.across-col2 {
        //                 // grid-row-start: r2;
        //                 // grid-row-end: r3;
        //                 grid-column-start: c1;
        //                 grid-column-end: c2e;
        //             }
        //             &.active_type {
        //                 background: #0e5570 !important;
        //                 border: 1px solid #169fc4 !important;
        //             }
        //         }
        //     }
        // }
    }

    .right {
        position: absolute;
        z-index: 12;
        right: vw(30);
        top: vh(88);
        bottom: vh(30);
        width: vw(480);

        display: grid;
        grid-template-rows: repeat(2, 1fr);
        overflow: hidden;
        .right-top-content {
            // height: vw(336);
        }
        .right-bottom-content {
        }
    }

    // 弹出层
    .dialog_box {
        position: absolute;
        z-index: 15;
        left: 0;
        top: vh(56);
        height: calc(100% - vh(56));
        width: 100%;
        background: rgba(0, 6, 17, 0.5);
        backdrop-filter: blur(20px);

        .dialog_content1 {
            .item {
                width: vw(480);
                border: 1px solid rgba(22, 159, 196, 0.25);
                padding: vh(24) vw(20);

                .label {
                    color: #fff;
                    margin-right: vw(10);
                }
                .value {
                    color: #2ef7fc;
                }
                .tel {
                    margin-left: vw(10);
                    color: #fff;
                }
            }
            .top {
                background: rgba(22, 159, 196, 0.2);
            }
            .bottom {
                // background: rgba(22, 159, 196, 0.2);
            }
        }
        .dialog_content2 {
            .info_box {
                background: rgba(22, 159, 196, 0.2);
                border: 1px solid rgba(22, 159, 196, 0.25);
                .label {
                    color: #fff;
                    margin-right: vw(10);
                }
                .value {
                    font-family: "D-DIN";
                    font-weight: 700;
                    font-size: vw(24);
                    background: linear-gradient(
                        180deg,
                        #61ffff 0%,
                        #2dcdff 100%
                    );
                    -webkit-background-clip: text;
                    -webkit-text-fill-color: transparent;
                    background-clip: text;
                    text-fill-color: transparent;
                }
            }
        }
    }

    // .left-top-content {
    //     height: vw(240);
    // }

    // .left-two-box {
    //     // padding: vh(20) vh(0) vh(10) vh(20);
    //     width: 100%;
    //     height: 100%;
    // }

    // .left-two {
    //     display: flex;
    //     justify-content: space-between;
    //     align-items: center;
    //     color: #fff;
    //     padding: vh(10) 0 0 0;
    // }

    // .left-two div:nth-child(2) {
    //     width: vh(304);
    //     height: vh(10);
    //     margin: 0 vh(10);
    //     background: rgba(255, 255, 255, 0.1);
    // }

    // .left-two div:nth-child(1) {
    //     width: vh(60);
    //     overflow: hidden;
    //     white-space: nowrap;
    //     text-overflow: ellipsis;
    // }

    // .left-two div:nth-child(3) {
    //     width: vh(20);
    //     overflow: hidden;
    //     white-space: nowrap;
    //     text-overflow: ellipsis;
    //     // margin-left: vh(10);
    // }

    // .progress {
    //     height: vh(10);
    // }

    // .iconfont {
    //     margin-right: vw(5);
    // }
}
</style>
